<template>
  <div class="page-login">
    <div class="login-header">
        <nuxt-link to="/">
            <img src="@/assets/img/logo.png" alt="logo" height="50px" width="100px" />
        </nuxt-link>
    </div>
    <div class="login-panel">
      <div class="banner">
        <img
          src="//s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg"
          width="480"
          height="370"
          alt="猪猪外卖网">
      </div>
      <div class="form">
        <h4
          v-if="error"
          class="tips"><i/>{{ error }}</h4>
        <p><span>账号登录</span></p>
        <el-input
          v-model="username"
          prefix-icon="profile"/>
        <el-input
          v-model="password"
          prefix-icon="password"
          type="password"/>
        <div class="foot">
          <el-checkbox v-model="rememberMe" @change="change">7天内自动登录</el-checkbox>
          <b>忘记密码？</b>
        </div>
        <div class="foot" >
          <nuxt-link to="register">没有账号？点击注册账号</nuxt-link>
        </div>
        <el-button
          class="btn-login"
          type="success"
          size="mini"
          @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as homeApi from '@/server/home.js'
export default {
  data: () => {
    return {
      rememberMe: false,
      username: '',
      password: '',
      error: ''
    }
  },
  layout: 'blank',
  methods: {
    login: function () {
      homeApi.login(this.rememberMe, this.username, this.password).then(result => {
        if(result.data.code == 200) {
          localStorage.setItem("user", result.data.data);
          this.$message({
            message: '登录成功！',
            type: 'success'
          });
          setTimeout(() => {
            this.$router.push({path:'/'});
          }, 1000)
        } else {
          this.error = result.data.message;
        }
      })
    },
    change: function() {
      console.log(this.rememberMe);
    }
  }
}
</script>

<style lang="scss">
    @import "@/assets/css/login/index.scss";
</style>
